<!--  -->
<template>
    <div>
        <table>
            <tr>
                <th>商品序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>删除商品</th>
            </tr>
            <tr v-for="(item, index) in list" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
    </div>
</template>
  
<script>
import { mapMutations, mapState } from 'vuex';
export default {
    name: "Com",
    data() {
        return {};
    },

    components: {

    },

    computed: {
        ...mapState(['list'])
    },

    mounted() { },

    methods: {
        ...mapMutations(['del']),
        del(index) {
            this.$store.commit('del', index)
        }
    },
    watch: {},
    mixins: [],
};
</script>
<style  scoped>
table {

    width: 700px;

    border: 1px solid black;
}

th,
td {
    width: 30px;
    height: 80px;
    border: 1px solid black;
}
</style>